<template>
    <view class="">
        <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
            <template #refresher="{refresherStatus}">
                <custom-refresher :status="refresherStatus" />
            </template>
            <template #loadingMoreNoMore>
                <custom-nomore />
            </template>

            <view class="item" v-for="(item,index) in dataList" :key="index">
                <view class="item-title p-20 flex col-center row-between">
                    <view class="">
                        <view class="bold xl">
                            商品编号:{{item.productNo}}
                        </view>
                        <view class="m-t-20">
                            状态：
                            <uni-tag v-if="item.status == 0" type="warning" text="未维修" size="mini" />
                            <uni-tag v-if="item.status == 1" type="success" text="已维修" size="mini" />
                        </view>
                    </view>
                    <view class="">
                        <u-tag text="编辑" type="primary" @click="handleEdit(item)"></u-tag>
                    </view>
                </view>
            </view>

            <u-popup v-model=" showPopup" mode="right" :mask-close-able="false" length="85%">
                <view class="p-20">
                    <uni-forms :model="goodsInfo">
                        <uni-forms-item label="商品编号">
                            <uni-easyinput disabled v-model="goodsInfo.productNo" type="text" border="none" />
                        </uni-forms-item>
                        <uni-forms-item label="状态">
                            <uni-data-select v-model="goodsInfo.status" :localdata="statusList"></uni-data-select>
                        </uni-forms-item>
                    </uni-forms>

                    <view class="flex row-around m-t-40">
                        <u-button @click="showPopup = false">取消</u-button>
                        <u-button type="primary" @click="handleData">保存</u-button>
                    </view>
                </view>
            </u-popup>
        </z-paging>
    </view>
</template>

<script setup>
    import {
        apiGetMaintainDetail,
        apiEditMaintainDetail
    } from '@/api/index.js'
    import {
        ref
    } from 'vue'
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        onPageScroll,
        onReachBottom
    } from '@dcloudio/uni-app';
    import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

    const dataList = ref([])
    const paging = ref(null)
    const headId = ref('')
    const showPopup = ref(false)
    const goodsInfo = ref({})
    const statusList = [{
        text: '未维修',
        value: '0'
    }, {
        text: '已维修',
        value: '1'
    }]


    const queryList = (pageNo, pageSize) => {
        const params = {
            headId: headId.value,
            current: pageNo,
            pageSize: pageSize,
        }
        apiGetMaintainDetail(params).then(res => {
            paging.value.complete(res.data.records);
        }).catch(res => {
            paging.value.complete(false);
        })
    }

    const handleEdit = (item) => {
        showPopup.value = true
        goodsInfo.value = item
    }

    //保存
    const handleData = async () => {
        try {
            let res = await apiEditMaintainDetail({
                ...goodsInfo.value
            })
            if (res.code == 200) {
                uni.$u.toast('保存成功')
                setTimeout(() => {
                    paging.value.refresh()
                    showPopup.value = false
                }, 1000)
            } else {
                paging.value.refresh()
                uni.$u.toast('保存失败')
            }
        } catch (err) {

        }
    }
    useZPaging(paging)

    onLoad((option) => {
        headId.value = option.headId
    })
</script>

<style lang="scss">
    .item-title {
        height: 140rpx;
        border-bottom: 2rpx solid black;
    }
</style>